<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="css/app.css" type="text/css" />  
    <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">
  <section class="vbox">
    
    <!-- header -->
    <jsp:include page="_header.jsp"></jsp:include>
    <!-- /header -->
    
    <section>
      <section class="hbox stretch">
         <!-- .aside -->
        <jsp:include page="_leftside.jsp"></jsp:include>
        <!-- /.aside -->
        <section id="content">
          <section class="vbox">
            <section class="w-f-md" id="bjax-target">
              <section class="hbox stretch">
                <!-- side content -->
                <aside class="aside bg-light dk" id="sidebar">
                  <section class="vbox animated fadeInUp">
                    <section class="scrollable hover">
                      <div class="list-group no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                        <a href="musicaudio.jsp" class="list-group-item">
                          All
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item active">
                          acoustic
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          ambient
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          blues
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          classical
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          country
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          electronic
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          emo
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          folk
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          hardcore
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          hip hop
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          indie
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          jazz
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          latin
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          metal
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          pop
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          pop punk
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          punk
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          reggae
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          rnb
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          rock
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          soul
                        </a>
                        <a href="musicaudio.jsp" class="list-group-item">
                          world
                        </a>
                      </div>
                    </section>
                  </section>
                </aside>
                <!-- / side content -->
                <section>
                  <section class="vbox">
                    <section class="scrollable padder-lg">
                      <h2 class="font-thin m-b">Acoustic</h2>
                      
                     <section class="panel panel-default">
                    <header class="panel-heading bg-light">
                      <ul class="nav nav-tabs nav-justified">
                        <li class="active"><a href="#Songs" data-toggle="tab">Songs</a></li>
                        <li class=""><a href="#Artists" data-toggle="tab">Artists</a></li>
                        <li class=""><a href="#Albums" data-toggle="tab">Albums</a></li>
                        <li class=""><a href="#Productions" data-toggle="tab">Productions</a></li>
                      </ul>
                    </header>
                    <div class="panel-body">
                      <div class="tab-content">
                        
                        <!-- Songs -->
                        <div class="tab-pane active" id="Songs">
                        
			              			   <section class="scrollable hover">
			                    <ul class="list-group list-group-lg no-bg auto m-b-none m-t-n-xxs">
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/m0.jpg" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Little Town</span>
			                          <small class="text-muted">by Soph Ashe</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a1.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Get lacinia odio sem nec elit</span>
			                          <small class="text-muted">by Filex</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a2.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Donec sed odio du</span>
			                          <small class="text-muted">by Dan Doorack</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a3.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Curabitur blandit tempu</span>
			                          <small class="text-muted">by Foxes</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a4.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Urna mollis ornare vel eu leo</span>
			                          <small class="text-muted">by Chris Fox</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a5.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Faucibus dolor auctor</span>
			                          <small class="text-muted">by Lauren Taylor</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a6.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Praesent commodo cursus magn</span>
			                          <small class="text-muted">by Chris Fox</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a7.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Vestibulum id</span>
			                          <small class="text-muted">by Milian</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a8.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Blandit tempu</span>
			                          <small class="text-muted">by Amanda Conlan</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a9.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Vestibulum ullamcorpe quis malesuada augue mco rpe</span>
			                          <small class="text-muted">by Dan Doorack</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a10.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Natis ipsum ac feugiat</span>
			                          <small class="text-muted">by Hamburg</small>
			                        </a>
			                      </li>
			                      <li class="list-group-item clearfix">
			                        <a href="#" class="jp-play-me pull-right m-t-sm m-l text-md">
			                          <i class="icon-control-play text"></i>
			                          <i class="icon-control-pause text-active"></i>
			                        </a>
			                        <a href="#" class="pull-left thumb-sm m-r">
			                          <img src="images/a0.png" alt="...">
			                        </a>
			                        <a class="clear" href="#">
			                          <span class="block text-ellipsis">Sec condimentum au</span>
			                          <small class="text-muted">by Amanda Conlan</small>
			                        </a>
			                      </li>
			                    </ul>
			                  </section>
			                  
			                  <ul class="pagination pagination">
			                      <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
			                      <li><a href="#">1</a></li>
			                      <li><a href="#">2</a></li>
			                      <li><a href="#">3</a></li>
			                      <li><a href="#">4</a></li>
			                      <li><a href="#">5</a></li>
			                      <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
			                    </ul>
			                    
			               </div>
			               <!-- /songs -->
                        
                         <!-- Artists -->
                        <div class="tab-pane" id="Artists">
                        			<div class="row row-sm">
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="bottom">
					                            <span class="badge bg-info m-l-sm m-b-sm">03:20</span>
					                          </div>
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <a href="#"><img src="images/p1.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Tempered Song</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Miaow</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay opacity r r-2x bg-black active">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#" data-toggle="class">
					                                <i class="icon-control-play i-2x text"></i>
					                                <i class="icon-control-pause i-2x text-active"></i>
					                              </a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right active" data-toggle="class">
					                                <i class="fa fa-heart-o text"></i>
					                                <i class="fa fa-heart text-active text-danger"></i>
					                              </a>
					                              <a href="#" data-toggle="class">
					                                <i class="fa fa-plus-circle text"></i>
					                                <i class="fa fa-check-circle text-active text-info"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <a href="#"><img src="images/p2.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Vivamus vel tincidunt libero</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Lauren Taylor</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="clearfix visible-xs"></div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <a href="#"><img src="images/p3.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Morbi id neque quam liquam sollicitudin</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Allen JH</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <div class="top">
					                            <span class="pull-right m-t-n-xs m-r-sm text-white">
					                              <i class="fa fa-bookmark i-lg"></i>
					                            </span>
					                          </div>
					                          <a href="#"><img src="images/p4.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Tincidunt libero</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Amanda Conlan</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="clearfix visible-xs"></div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <a href="#"><img src="images/p5.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Fermentum diam</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Nisa Colen</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="top">
					                            <span class="pull-right m-t-sm m-r-sm badge bg-info">6</span>
					                          </div>
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>                          
					                          <a href="#"><img src="images/p6.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Habitant</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Dan Doorack</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="clearfix visible-xs"></div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <div class="top">
					                            <span class="pull-right m-t-sm m-r-sm badge bg-white">12</span>
					                          </div>
					                          <a href="#"><img src="images/p7.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Vivamus vel tincidunt libero</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Ligula H</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <a href="#"><img src="images/p8.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Aliquam sollicitudin venenati</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">James East</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="clearfix visible-xs"></div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <a href="#"><img src="images/p9.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Lementum ligula vitae</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Lauren Taylor</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay r r-2x bg-light dker active">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#" data-toggle="class" class="active">
					                                <i class="icon-control-play i-2x text"></i>
					                                <i class="icon-control-pause i-2x text-active"></i>
					                              </a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right" data-toggle="class">
					                                <i class="fa fa-heart-o text"></i>
					                                <i class="fa fa-heart text-active text-danger"></i>
					                              </a>
					                              <a href="#" class="active" data-toggle="class">
					                                <i class="fa fa-plus-circle text"></i>
					                                <i class="fa fa-check-circle text-active text-info"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <a href="#"><img src="images/p10.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Egestas dui nec fermentum </a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Chris Fox</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="clearfix visible-xs"></div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <a href="#"><img src="images/p11.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Aliquam sollicitudin venenatis ipsum</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">Jack Jason</a>
					                        </div>
					                      </div>
					                    </div>
					                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
					                      <div class="item">
					                        <div class="pos-rlt">
					                          <div class="item-overlay opacity r r-2x bg-black">
					                            <div class="text-info padder m-t-sm text-sm">
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star"></i>
					                              <i class="fa fa-star-o text-muted"></i>
					                            </div>
					                            <div class="center text-center m-t-n">
					                              <a href="#"><i class="icon-control-play i-2x"></i></a>
					                            </div>
					                            <div class="bottom padder m-b-sm">
					                              <a href="#" class="pull-right">
					                                <i class="fa fa-heart-o"></i>
					                              </a>
					                              <a href="#">
					                                <i class="fa fa-plus-circle"></i>
					                              </a>
					                            </div>
					                          </div>
					                          <a href="#"><img src="images/p12.jpg" alt="" class="r r-2x img-full"></a>
					                        </div>
					                        <div class="padder-v">
					                          <a href="#" class="text-ellipsis">Vestibulum ullamcorper</a>
					                          <a href="#" class="text-ellipsis text-xs text-muted">MM &amp; DD</a>
					                        </div>
					                      </div>
					                    </div>
					                  </div>	
					                  <ul class="pagination pagination">
			                      <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
			                      <li><a href="#">1</a></li>
			                      <li><a href="#">2</a></li>
			                      <li><a href="#">3</a></li>
			                      <li><a href="#">4</a></li>
			                      <li><a href="#">5</a></li>
			                      <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
			                    </ul>
					                  </div>
					                  <!-- /Artists -->
                        
                         <!-- Albums -->
                        <div class="tab-pane" id="Albums">
                        		<div class="row row-sm">
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m40.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Tempered Song</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Miaow</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m41.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Morbi id neque quam</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Phasellus</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m42.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Aliquam sollicitudin venenatis ipsum</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Malesuada</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m43.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Citudin venenatis ipsum ac</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Volutpat</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m44.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Vestibulum ullamcorper sodales nisi</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Mauris Qiaos</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m40.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Mauris convallis mauris at</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Neque</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m45.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Sodales nisi nec condimentum</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Augue</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m44.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Nisi nec condimentum</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Miaow</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m43.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Phasellus at ultricies nequ</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Volutpat</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m42.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Quis malesuada augue</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Feugiat</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m41.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Ipsum ac feugiat</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Quam AC</a>
                    </div>
                  </div>
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3">
                  <div class="item">
                    <div class="pos-rlt">
                      <div class="item-overlay opacity r r-2x bg-black">
                        <div class="center text-center m-t-n">
                          <a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
                        </div>
                      </div>
                      <a href="video-detail.html"><img src="images/m40.jpg" alt="" class="r r-2x img-full"></a>
                    </div>
                    <div class="padder-v">
                      <a href="video-detail.html" class="text-ellipsis">Ullamcorper sodales nisi nec condimentu</a>
                      <a href="video-detail.html" class="text-ellipsis text-xs text-muted">Convallis</a>
                    </div>
                  </div>
                </div>                
              </div>
			                      <ul class="pagination pagination">
			                      <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
			                      <li><a href="#">1</a></li>
			                      <li><a href="#">2</a></li>
			                      <li><a href="#">3</a></li>
			                      <li><a href="#">4</a></li>
			                      <li><a href="#">5</a></li>
			                      <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
			                    </ul>
			                      </div>
                         <!-- /Albums -->
                        
                         <!-- Productions -->
                        <div class="tab-pane" id="Productions">
                        	<div class="row row-sm">
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m1.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Tempered Song</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Miaow</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m2.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Morbi id neque quam</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Phasellus</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/a10.png" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Aliquam sollicitudin venenatis ipsum</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Malesuada</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m4.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Citudin venenatis ipsum ac</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Volutpat</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m5.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Vestibulum ullamcorper sodales nisi</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Mauris Qiaos</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m6.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Mauris convallis mauris at</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Neque</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m0.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Sodales nisi nec condimentum</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Augue</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m8.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Nisi nec condimentum</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Miaow</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m9.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Phasellus at ultricies nequ</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Volutpat</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m10.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Quis malesuada augue</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Feugiat</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m11.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Ipsum ac feugiat</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Quam AC</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m12.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Ullamcorper sodales nisi nec condimentu</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Convallis</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m13.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Tudin venenatis ulum ullamcorper</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Pellent Esque</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m14.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Sodales nisi nec condimentum</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Utricies</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m15.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Sec condimentum augue</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Quis Fox</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/a9.png" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Dimentum at pellentesque volutpat</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Suada</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m16.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Natis ipsum ac feugiat</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Monvallis</a>
		                            </div>
		                          </div>
		                        </div>
		                        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		                          <div class="item">
		                            <div class="pos-rlt">
		                              <div class="item-overlay opacity r r-2x bg-black">
		                                <div class="center text-center m-t-n">
		                                  <a href="#"><i class="fa fa-play-circle i-2x"></i></a>
		                                </div>
		                              </div>
		                              <a href="track-detail.html"><img src="images/m17.jpg" alt="" class="r r-2x img-full"></a>
		                            </div>
		                            <div class="padder-v">
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis">Dimentum tesque volut icies neque</a>
		                              <a href="track-detail.html" data-bjax="" data-target="#bjax-target" data-el="#bjax-el" data-replace="true" class="text-ellipsis text-xs text-muted">Londi Mentum</a>
		                            </div>
		                          </div>
		                        </div>
		                      </div>
		                      <ul class="pagination pagination">
			                      <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
			                      <li><a href="#">1</a></li>
			                      <li><a href="#">2</a></li>
			                      <li><a href="#">3</a></li>
			                      <li><a href="#">4</a></li>
			                      <li><a href="#">5</a></li>
			                      <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
			                    </ul>
                      	  </div>
                         <!-- /Productions -->
                      
                      </div>
                    </div>
                  </section>
                      
                      
                    </section>                    
                  </section>
                </section>
              </section>
            </section>
            <footer class="footer bg-info dker">
              <div id="jp_container_N">
                    <div class="jp-type-playlist">
                      <div id="jplayer_N" class="jp-jplayer hide"></div>
                      <div class="jp-gui">
                        <div class="jp-video-play hide">
                          <a class="jp-video-play-icon">play</a>
                        </div>
                        <div class="jp-interface">
                          <div class="jp-controls">
                            <div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
                            <div>
                              <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                              <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                            </div>
                            <div><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
                            <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
                            <div><a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a></div>
                            <div class="jp-progress hidden-xs">
                              <div class="jp-seek-bar dk">
                                <div class="jp-play-bar bg-info">
                                </div>
                                <div class="jp-title text-lt">
                                  <ul>
                                    <li></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                            <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                            <div class="hidden-xs hidden-sm">
                              <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                              <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                            </div>
                            <div class="hidden-xs hidden-sm jp-volume">
                              <div class="jp-volume-bar dk">
                                <div class="jp-volume-bar-value lter"></div>
                              </div>
                            </div>
                            <div>
                              <a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
                              <a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
                            </div>
                            <div>
                              <a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
                              <a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
                            </div>
                            <div class="hide">
                              <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                              <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="jp-playlist dropup" id="playlist">
                        <ul class="dropdown-menu aside-xl dker">
                          <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                          <li class="list-group-item"></li>
                        </ul>
                      </div>
                      <div class="jp-no-solution hide">
                        <span>Update Required</span>
                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                      </div>
                    </div>
                  </div>
            </footer>
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
    </section>    
  </section>
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- App -->
  <script src="js/app.js"></script>  
  <script src="js/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/app.plugin.js"></script>
  <script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="js/jPlayer/demo.js"></script>
</body>
</html>